<template>
    <div>
        <el-row :gutter="20" style="margin-top:10px">
            <!-- 一共24份 一共4个card 每个占6份 -->
            <!-- 第一个card -->
            <el-col :span="6" :offset="0">
                <el-card>
                    <!-- 父子组件通信(props方式) 数据不是动态的不需要使用: -->
                    <Detail title="总销售额" count="¥ 126560" >
                        <!-- 使用插槽给子组件传递结构 具名插槽-->
                        <template slot="charts">
                            <span>周同比&nbsp;&nbsp;56.67%
                                <svg t="1653967353852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2147" width="16" height="16"><path d="M480 896V250.4L237.6 493.6 192 448l274.4-274.4L512 128l45.6 45.6L832 448l-45.6 45.6L544 250.4V896h-64z" p-id="2148" fill="#17abe3"></path></svg>&nbsp;&nbsp;
                            </span>
                            <span>日同比&nbsp;&nbsp;19.96% &nbsp;
                                <svg t="1653967663577" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3076" width="16" height="16"><path d="M921.6 563.2c-9.6-9.6-25.6-9.6-35.2 0L544 896l0-822.4c0-12.8-9.6-22.4-25.6-22.4s-25.6 9.6-25.6 22.4L492.8 896l-342.4-339.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 22.4 0 32l384 377.6c6.4 6.4 12.8 6.4 19.2 6.4 0 0 0 0 0 0 3.2 0 3.2 0 6.4 0 0 0 0 0 3.2 0 3.2 0 6.4-3.2 9.6-6.4l380.8-371.2C931.2 588.8 931.2 572.8 921.6 563.2z" p-id="3077" fill="#d4237a"></path></svg>
                            </span>
                        </template>
                        <template slot="footer">
                           <span>日销售额：<b>￥99999</b></span>
                        </template>
                    </Detail>
                </el-card>
                
            </el-col>

            <!-- 第二个card -->
            <el-col :span="6" :offset="0">
                <el-card>
                    <!-- title父子组件通信(props方式) 数据不是动态的不需要使用: -->
                    <Detail title="访问量" count="88200">
                         <!-- 使用插槽给子组件传递结构 具名插槽-->
                         <template slot="charts">
                             <!-- 折线图 -->
                            <lineChart></lineChart>
                        </template>
                        <template slot="footer">
                           <span>日访问量：<b>￥9999</b></span>
                        </template>
                    </Detail>
                </el-card>
            </el-col>

            <!-- 第三个card -->
            <el-col :span="6" :offset="0">
                <el-card>
                    <!-- title父子组件通信(props方式) 数据不是动态的不需要使用: -->
                    <Detail title="支付笔数" count="99932">
                         <!-- 使用插槽给子组件传递结构 具名插槽-->
                        <!-- 图表 -->
                        <template slot="charts">
                            <barCharts></barCharts>
                        </template>

                        <template slot="footer">
                           <span>转化率：<b>75%</b></span>
                        </template>
                    </Detail>
                </el-card>
            </el-col>

            <!-- 第四个card -->
            <el-col :span="6" :offset="0">
                <el-card>
                    <!-- title父子组件通信(props方式) 数据不是动态的不需要使用: -->
                    <Detail title="运营活动效果" count="99886">
                         <!-- 使用插槽给子组件传递结构 具名插槽-->
                        <!-- 图表 -->
                        <template slot="charts">
                            <progressCharts/>
                        </template>

                        <template slot="footer">
                            <span>周同比&nbsp;&nbsp;35.67%
                                <svg t="1653967353852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2147" width="16" height="16"><path d="M480 896V250.4L237.6 493.6 192 448l274.4-274.4L512 128l45.6 45.6L832 448l-45.6 45.6L544 250.4V896h-64z" p-id="2148" fill="#17abe3"></path></svg>&nbsp;&nbsp; 
                            </span>
                            <span>日同比&nbsp;&nbsp;67.96% 
                                <svg t="1653967663577" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3076" width="16" height="16"><path d="M921.6 563.2c-9.6-9.6-25.6-9.6-35.2 0L544 896l0-822.4c0-12.8-9.6-22.4-25.6-22.4s-25.6 9.6-25.6 22.4L492.8 896l-342.4-339.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 22.4 0 32l384 377.6c6.4 6.4 12.8 6.4 19.2 6.4 0 0 0 0 0 0 3.2 0 3.2 0 6.4 0 0 0 0 0 3.2 0 3.2 0 6.4-3.2 9.6-6.4l380.8-371.2C931.2 588.8 931.2 572.8 921.6 563.2z" p-id="3077" fill="#d4237a"></path></svg>
                            </span>
                        </template>
                    </Detail>
                </el-card>
            </el-col>
        </el-row>
        
    </div>
</template>

<script>
import Detail from "./Detail"
import lineChart from './lineChart.vue'
import barCharts from './barCharts.vue'
import progressCharts from './progressCharts.vue'
export default {
    name:'Card',
    components:{
        Detail,
        lineChart,
        barCharts,
        progressCharts
    }
}
</script>

<style>

</style>